iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 18
0
Modern Web

用 JavaScript 打造全端產品的入門學習筆記系列 第 18

強化功能:排序 sort、篩選 filter——經典全端實務 V

  • 分享至 

  • xImage
  •  

Sort, Filter

本筆記將接續 前篇,以 Todo List 為例,用五大步驟進一步拆解「排序」、「篩選」兩大強化功能的開發歷程,然而資料庫本身提供不只一種能達成目的的操作方法,本筆記僅提供其中之一,想深入研究者可以自行查閱 官方文件

 

排序 sort

Sort 運作機制

Sort 運作機制

1. 客戶端 Client:觸發請求的機制

排序下拉選單

排序下拉選單

在記帳本的專案中,我使用下拉選單 <select> & <option> 來做為排序的表單,並提供按金額遞增或遞減的兩個選項:

<form action="/records">
  <select class="custom-select" id="sort" name="sort">
    <option value="" selected>排 序 方 式...</option>
    <option value="asc" {{#is sort "asc"}} selected {{/is}}>金額遞增</option>
    <option value="desc" {{#is sort "desc"}} selected {{/is}}>金額遞減</option>
  </select>
  <button type="submit" class="btn btn-dark">Submit</button>
</form>

P.s. 我使用 Bootstrap 做這個專案,排版相關的 HTML 已省略,比較好懂

2. 路由 Route:接收請求的路由

在首頁的清單上增加表單,所以路由會直接從這裡修改:

router.get('/', (req, res) => {
  const sort = req.query.sort // 取得排序方式
  // ...
})

3,4,5. 伺服器內部的 MVC

因為資料結構設計及其他篩選類功能的關係,原始的路由內部邏輯更複雜,這邊僅記錄排序的處理流程:

// Controller:路由內的邏輯都是分派程序
router.get('/', (req, res) => {
  const sort = req.query.sort
  Record.find()
        .lean()
        .sort({ amount: sort }) // Model:從資料庫取出並排序全部資料
        .then(records => {
          // View:傳進首頁模板渲染
          res.render('index', { records, categories, sort })
        })
        .catch(error => console.error(error))
})

 

篩選 filter

filter 運作機制

filter 運作機制

1. 客戶端 Client:觸發請求的機制

篩選複選選單

篩選複選選單

在記帳本的專案中,我使用切換式複選選單 switch <input type="checkbox">來做為排序的表單,並直接抓取資料庫中的類別,以 {{#each categories}} 渲染到模板上(但其實可以設計更好的體驗,我只是想練習用複選選單):

<form action="/records">
  {{#each categories}}
  <div class="custom-control custom-switch">
    <input type="checkbox" class="custom-control-input" id="customSwitch{{this._id}}" name="filter" value="{{this._id}}" checked>
    <label class="custom-control-label" for="customSwitch{{this._id}}">{{this.title}}</label>
  </div>
  {{/each}}
  <button type="submit" class="btn btn-dark">Submit</button>
</form>

P.s. 我使用 Bootstrap 做這個專案,排版相關的 HTML 已省略,比較好懂

2. 路由 Route:接收請求的路由

在首頁的清單上增加表單,所以路由會直接從這裡修改:

router.get('/', (req, res) => {
  const { filter } = req.query // 取得篩選類別
  // ...
})

3,4,5. 伺服器內部的 MVC

因為資料結構設計及其他篩選類功能的關係,原始的路由內部邏輯更複雜,這邊僅記錄篩選的處理流程:

// Controller:路由內的邏輯都是分派程序
router.get('/', (req, res) => {
  const sort = req.query.sort
  Record.find({ category: filter }) // Model:從資料庫取出符合篩選類別的資料
        .lean()
        .then(records => {
          // View:傳進首頁模板渲染
          res.render('index', { records, categories })
        })
        .catch(error => console.error(error))
})

 


閱讀更多

Infinite Gamer
關於本系列更多內容及導讀,請閱讀作者於 Medium 個人專欄 【無限賽局玩家 Infinite Gamer | Publication – 】 上的文章 《用 JavaScript 打造全端產品的入門學習筆記》系列指南


上一篇
資料操作 CRUD 功能:實作修改、刪除——經典全端實務 IV
下一篇
重構程式碼——經典全端實務 IV
系列文
用 JavaScript 打造全端產品的入門學習筆記30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言